import React, { useEffect, useRef, useState } from 'react'
import { listMonthData, listWeekData, listPersonalData } from '@/api/home'
import './index.css'
import * as echarts from 'echarts';

function Index() {
  const chartMonthRef = useRef(null)
  const chartWeekRef = useRef(null)
  const chartCategoryRef = useRef(null)

  const [monthList, setMonthList] = useState([])
  const [weekList, setWeekList] = useState([])
  const [categoryList, setCategoryList] = useState([])

  const weekTextList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

  useEffect(() => {
    listMonthData().then(res => {
      setMonthList(res.data)
    })
    listWeekData().then(res => {
      setWeekList(res.data)
    })
    listPersonalData().then(res => {
      setCategoryList(res.data)
    })
  }, [])

  // 月份
  useEffect(() => {
    if (!Array.isArray(monthList) || monthList.length === 0) {
      return; // monthList 无效时直接返回
    }

    const chart = echarts.init(chartMonthRef.current)

    const legendData = monthList.map((m) => m.name)
    const xAxisData = Object.keys(monthList[0].data)
    const data = monthList.map((m) => {
      const d = Object.values(m.data).map((i) => Number(i))
      return {
        name: m.name,
        type: 'line',
        stack: 'Total',
        data: d,
      }
    })

    // 配置项，基于接口返回的数据
    const options = {
      title: {
        text: '月份数据'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: legendData,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
      },
      yAxis: {
        type: 'value',
      },
      series: data,
    };
    // 设置图表的配置项
    chart.setOption(options);

    // 组件卸载时销毁图表
    return () => {
      chart.dispose();
    };

  }, [monthList])

  // 一周
  useEffect(() => {
    if (!Array.isArray(weekList) || weekList.length === 0) {
      return;
    }

    const weekChart = echarts.init(chartWeekRef.current)

    const legendData = weekList.map((w) => w.name)
    const data = weekList.map((w) => {
      return {
        name: w.name,
        type: 'bar',
        data: w.list.map((l) => l.data)
      }
    })

    // 配置项，基于接口返回的数据
    const weekOptions = {
      title: {
        text: '周数据',
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: legendData
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: weekTextList,
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: data
    };
    // 设置图表的配置项
    weekChart.setOption(weekOptions);

    // 组件卸载时销毁图表
    return () => {
      weekChart.dispose();
    };
  }, [weekList])

  // 个人
  useEffect(() => {
    if (!Array.isArray(categoryList) || categoryList.length === 0) {
      return;
    }
    const categoryChart = echarts.init(chartCategoryRef.current)
    const data = categoryList.map((c) => {
      return {
        value: c.value,
        name: c.name,
      }
    })
    const nameList = categoryList.map((c) => c.name)

    const categoryOption = {
      title: {
        text: '个人业绩',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: nameList,
          type: 'pie',
          radius: '50%',
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    // 设置图表的配置项
    categoryChart.setOption(categoryOption);

    // 组件卸载时销毁图表
    return () => {
      categoryChart.dispose();
    };

  }, [categoryList])

  return (
    <div className='home-echart-container'>
      <div className='home-echart-top'>
        <div ref={chartMonthRef}></div>
      </div>
      <div className='home-echart-bottom'>
        <div ref={chartWeekRef}></div>
        <div ref={chartCategoryRef}></div>
      </div>
    </div>
  )
}

export default Index




